<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:composition template="/layout/masterPageNotHeaderSearch.xhtml">
        <ui:define name="ui-header">
            <title>#{utilsController.getLanguages("ResearchTitle")}</title>
        </ui:define>
        <ui:define name="ui-content">
            <style>
                .servive-block{
                    padding: 20px 16px;
                }
                .repairCareItem{
                    padding: 20px 16px;
                    text-align: left;
                    background: none;
                    border: none;
                }
                .a-group-item{
                    font-size: 16px;
                    position: relative;
                }
                .a-toggle:after {
                    color: #3498db;
                    content: "";
                    display: inline-block;
                    font-family: FontAwesome;
                    font-size: 17px;
                    font-weight: bold;
                    position: absolute;
                    right: -10px;
                    top: -5px;
                }
                .repair-title{
                    color: #098ae4 !important;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 20px;
                }
                .headerColor{
                    font-size: 24px;
                }
                .best-bet-pattern img {
                    margin: 4px -5px 8px 0 !important;
                }
                .bb-text {
                    font-weight: 700;
                    margin: 0 0 10px 10px;
                }
                .best-bet-pattern input[type="checkbox"] {
                    height: 16px;
                    margin-bottom: 4px;
                    width: 16px;
                }
            </style>
            <div class="container content bg-gradient-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="panel panel-default rounded-2x">
                            <div class="panel-body" style="height: 448px">
                                <h2 class="headerColor">Research New and Used Cars</h2>
                                <div class="tab-v1 cus-tab">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a data-toggle="tab" href="#home-1">Datepicker Forms</a></li>
                                        <li class=""><a data-toggle="tab" href="#profile-1">Validation Forms</a></li>
                                        <li class=""><a data-toggle="tab" href="#messages-1">Masking Forms</a></li>
                                    </ul>                
                                    <div class="tab-content">
                                        <!-- Datepicker Forms -->
                                        <div id="home-1" class="tab-pane fade active in">
                                            <p style="font-weight: 700;margin-bottom: 5px;font-size: 17px;margin-bottom: 20px;margin-top: 10px;">Start by selecting one or more price ranges:</p>
                                            <div class="col-md-12" style="padding-left: 0px">
                                                <div class="col-md-4">
                                                    <label for="shop-by-price-8">
                                                        <input type="checkbox" id="shop-by-price-8" data-display-name="$10,001-$15,000" value="8" name="shopByPrice"/>
                                                        $10,001-$15,000 
                                                        <span class="aggregated-count">
                                                            (26)
                                                        </span>
                                                    </label>
                                                    <label for="shop-by-price-12">
                                                        <input type="checkbox" id="shop-by-price-12" data-display-name="$30,001-$40,000" value="12" name="shopByPrice"/>
                                                        $30,001-$40,000 
                                                        <span class="aggregated-count">
                                                            (359)
                                                        </span>
                                                    </label>
                                                    <label for="shop-by-price-15">
                                                        <input type="checkbox" id="shop-by-price-15" data-display-name="$75,001-$100,000" value="15" name="shopByPrice"/>
                                                        $75,001-$100,000 
                                                        <span class="aggregated-count">
                                                            (87)
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="shop-by-price-9">
                                                        <input type="checkbox" id="shop-by-price-9" data-display-name="$15,001-$20,000" value="9" name="shopByPrice"/>
                                                        $15,001-$20,000 
                                                        <span class="aggregated-count">
                                                            (115)
                                                        </span>
                                                    </label>
                                                    <label for="shop-by-price-13">
                                                        <input type="checkbox" id="shop-by-price-13" data-display-name="$40,001-$50,000" value="13" name="shopByPrice"/>
                                                        $40,001-$50,000 
                                                        <span class="aggregated-count">
                                                            (272)
                                                        </span>
                                                    </label>
                                                    <label for="shop-by-price-16">
                                                        <input type="checkbox" id="shop-by-price-16" data-display-name="$100,001-$150,000" value="16" name="shopByPrice"/>
                                                        $100,001-$150,000 
                                                        <span class="aggregated-count">
                                                            (58)
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="shop-by-price-11">
                                                        <input type="checkbox" id="shop-by-price-11" data-display-name="$20,001-$30,000" value="11" name="shopByPrice"/>
                                                        $20,001-$30,000 
                                                        <span class="aggregated-count">
                                                            (324)
                                                        </span>
                                                    </label>
                                                    <label for="shop-by-price-14">
                                                        <input type="checkbox" id="shop-by-price-14" data-display-name="$50,001-$75,000" value="14" name="shopByPrice"/>
                                                        $50,001-$75,000 
                                                        <span class="aggregated-count">
                                                            (193)
                                                        </span>
                                                    </label>
                                                    <label for="shop-by-price-49">
                                                        <input type="checkbox" id="shop-by-price-49" data-display-name="More than $150,000" value="49" name="shopByPrice"/>
                                                        More than $150,000 
                                                        <span class="aggregated-count">
                                                            (65)
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-12" style="margin-top: 20px;margin-bottom: 10px;">
                                                <div class="best-bet-pattern res-bb">
                                                    <input type="checkbox" value="true" class="best-bet" name="bestBet"/>
                                                    <img src="/resourcesApp/img/Research/icon-bestbet.png"/>
                                                    <a data-position="top" data-trigger="click" href="#best-bet-flyout" class="flyout" data-hasqtip="true">
                                                        <span class="icon-question-header"></span>
                                                    </a>
                                                    <span class="bb-text">Show only Best Bets in selected categories</span>
                                                    <div class="info-flyout" id="best-bet-flyout" style="width: 192px; display: none;">Best Bets get above-average mpg, class-average or better reliability, class-average or better crash-test ratings, and our recommendation.</div>
                                                </div>
                                            </div>
                                            <div class="col-md-12" style="margin-top: 20px;margin-bottom: 10px;">
                                                <button type="button" class="btn btn-success rounded-custom-def"><i class="fa fa-tags"></i> See Models</button>
                                                <a style="margin-left: 10px;">Clear filter</a>
                                            </div>
                                        </div>
                                        <!-- End Datepicker Forms -->

                                        <!-- Validation Forms -->
                                        <div id="profile-1" class="tab-pane fade">

                                        </div>
                                        <!-- End Validation Forms -->

                                        <!-- Masking Forms -->
                                        <div id="messages-1" class="tab-pane fade">

                                        </div>
                                        <!-- End Masking Forms -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default rounded-2x">
                            <div class="panel-body">
                                <ui:include src="/layout/Search/Search_Specific_Cars.xhtml"></ui:include>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel panel-default rounded-2x">
                            <div class="panel-body">
                                <h2 class="headerColor">Automobile Specs Comparision</h2>
                                <p style="margin-top: 20px;">
                                    <img style="width: 230px;height: auto" src="/resourcesApp/img/sagoauto/side-by-side-compare.jpg"/>
                                </p>
                                <p style="color: #067891;font-size: 20px;">Select Auto to Compare</p>
                            </div>
                        </div>
                        <ui:include src="/layout/Search/Search_CheckValueOfYourAuto.xhtml"></ui:include>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-9" style="padding-right: 0px;">
                        <div class="col-md-12" style="padding-left: 0px;">
                            <div class="col-md-4" style="padding-right: 3px;padding-left: 3px;">
                                <div class="carousel slide carousel-v1">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img alt="" src="/resourcesApp/img/Research/img1.jpg"/>
                                            <div class="carousel-caption">
                                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" style="padding-right: 3px;padding-left: 3px;">
                                <div class="carousel slide carousel-v1">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img alt="" src="/resourcesApp/img/Research/img2.jpg"/>
                                            <div class="carousel-caption">
                                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" style="padding-right: 3px;padding-left: 3px;">
                                <div class="carousel slide carousel-v1">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img alt="" src="/resourcesApp/img/Research/img2.jpg"/>
                                            <div class="carousel-caption">
                                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" style="padding-left: 0px;margin-top: 15px">
                            <div class="col-md-4" style="padding-right: 3px;padding-left: 3px;">
                                <div class="carousel slide carousel-v1">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img alt="" src="/resourcesApp/img/Research/img3.jpg"/>
                                            <div class="carousel-caption">
                                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" style="padding-right: 3px;padding-left: 3px;">
                                <div class="carousel slide carousel-v1">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img alt="" src="/resourcesApp/img/Research/img4.jpg"/>
                                            <div class="carousel-caption">
                                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" style="padding-right: 3px;padding-left: 3px;">
                                <div class="carousel slide carousel-v1">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img alt="" src="/resourcesApp/img/Research/img4.jpg"/>
                                            <div class="carousel-caption">
                                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <img alt="" src="/resourcesApp/img/Research/right1.png" style="width: 100%;"/>
                        <img alt="" src="/resourcesApp/img/Research/right2.png" style="width: 100%;margin-top: 5px;"/>
                    </div>
                </div>
            </div>
        </ui:define>
    </ui:composition> 
</html>